<template>
  <div>
    <h1>我是子组件</h1>
    <h1>x:{{ x }} y:{{ y }}</h1>
    <h2 v-if="loading">加载中...</h2>
    <h2 v-else-if="errorMsg">{{ errorMsg }}</h2>
    <h2 v-else>
      <li>{{ data }}</li>
    </h2>
  </div>
</template>

<script lang="ts">
interface AddressData {
  id: number
  address: string
  distance: string
}
interface ProductsData {
  id: string
  title: string
  price: number
}
import UseRequest from '@/hooks/UseRequest'
import UseMousePosition from '@/hooks/UseMousePosition'
import { defineComponent, toRefs, watch } from 'vue'

export default defineComponent({
  name: 'Child',
  setup() {
    const position = UseMousePosition()
    // const { loading, data, errorMsg } =
    //   UseRequest<AddressData>('/data/address.json')
    const { loading, data, errorMsg } = UseRequest<ProductsData[]>(
      '/data/products.json'
    )
    watch(data, () => {
      if (data.value) {
        console.log(data.value.length)
      }
    })
    return {
      ...position,
      loading,
      data,
      errorMsg
    }
  }
})
</script>

<style scoped>
</style>